<template>
  <div class="app-container">
    <vxe-toolbar :refresh="{query: onSearchBtnClick}">
      <template v-slot:buttons>
        <vxe-button v-auth="['admin', 'formdata:data']" size="medium" icon="el-icon-circle-plus-outline" status="primary" @click="onAddBtnClick">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border="inner"
      size="mini"
      :data="tableData"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column type="checkbox" width="50" />
      <vxe-table-column field="createName" title="申请人" />
      <vxe-table-column field="createTime" title="申请时间" />
      <vxe-table-column v-for="(item,index) in tableColumn.fields" :key="index" :title="item.__config__.label" :field="item.__vModel__" />
      <vxe-table-column title="操作" show-overflow>
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <vxe-button v-auth="['admin', 'formdata:data']" size="mini" icon="el-icon-edit" status="primary" @click="onEditBtnClick(row)" />
          </el-tooltip>
          <el-tooltip content="查看进度" placement="bottom" effect="light">
            <vxe-button size="mini" icon="iconfont icon-jindutiao" status="success" @click="onBtnHighLine(row)" />
          </el-tooltip>
          <el-tooltip content="审批历史" placement="bottom" effect="light">
            <vxe-button size="mini" icon="iconfont icon-lishijilu" status="info" @click="onBtnTaskHistorical(row)" />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form v-if="detail" v-model="detail" @refData="onSearchBtnClick" />
    <el-dialog :visible.sync="isShow">
      <HighLine v-if="line" :key="keys" v-model="line" />
    </el-dialog>
    <el-dialog :visible.sync="isHis">
      <Historical v-if="his" :key="hiskeys" v-model="his" />
    </el-dialog>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100,200]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { get } from '@/api/form'
import { groupdatas } from '@/api/groupdata'
import Form from './form'
import Historical from './Historical'
import HighLine from '../design/HighLine'
export default {
  components: {
    Form,
    HighLine,
    Historical
  },
  props: {
    value: {
      type: Object,
      default: () => Object.create({})
    }
  },
  data() {
    return {
      keys: +new Date(),
      hiskeys: +new Date(),
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      tableColumn: { fields: [] },
      multipleSelection: [],
      isShow: false,
      isHis: false,
      detail: null,
      line: null,
      his: null,
      total: 0,
      data: [],
      checked: []
    }
  },
  created() {
    const formId = this.$route.meta.formId
    this.onAttrBtnClick(formId)
  },
  methods: {
    onBtnTaskHistorical(row) {
      this.hiskeys = +new Date()
      this.isHis = true
      this.his = row
    },
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onAttrBtnClick(id) {
      get(id).then(data => {
        this.tableColumn = JSON.parse(data.content)
        this.onSearchBtnClick()
      })
    },
    onBtnHighLine(row) {
      // 更新表单
      this.keys = +new Date()
      this.isShow = true
      this.line = row
    },
    onAddBtnClick() {
      const rows = {}
      rows.formId = this.$route.meta.formId
      rows.gid = this.$route.meta.id
      rows.type = this.$route.meta.type
      this.detail = rows
    },
    onEditBtnClick(row) {
      row.formId = this.$route.meta.formId
      row.gid = this.$route.meta.id
      row.type = this.$route.meta.type
      this.detail = row
    },
    onSearchBtnClick() {
      this.loading = true
      this.formData.gid = this.$route.meta.id
      groupdatas(this.formData).then(data => {
        const _selfList = []
        data.list.forEach(_lItem => {
          _lItem.value = JSON.parse(_lItem.value)
          const _fields = _lItem.value.fields
          const _rowData = {}
          _fields.map((item) => {
            _rowData[item.name] = item.value
          })
          _rowData.id = _lItem.id
          _rowData.instanceId = _lItem.instanceId
          _rowData.createName = _lItem.createName
          _rowData.createTime = _lItem.createTime
          _selfList.push(_rowData)
        })
        this.tableData = _selfList
        this.total = data.total
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    }
  }
}
</script>
